<template>
	<view>
		<!-- <tn-nav-bar alpha backTitle="" :isBack="false"></tn-nav-bar>
		<view :style="{ paddingTop: vuex_custom_bar_height + 'px' }"> </view> -->


		<view style="padding: 0 32rpx;">
			<view class="title u-f-ajsb">
				<view>监控</view>
				<view style="color: #999;font-size: 25rpx;">自动模式
					<image style="width: 24rpx;height: 24rpx;margin-left: 10rpx;" @click="show = true"
						src="/static/image/icon/wen.png" mode="scaleToFill" />
				</view>
			</view>
			<view style="position: relative;">
				<view class="u-f-ajc" style="position: absolute;top: 90rpx;
				border-radius: 50%;
				padding: 20rpx;
				z-index: 999;background-color: #fff;right: 30rpx;">
					<image style="width: 40rpx;height: 40rpx;" src="/static/image/icon/dengk.png" mode="scaleToFill" />
				</view>
				<video src="" style="width: 686rpx;height: 400rpx;background-color: #999;border-radius: 30rpx;
		margin-top: 50rpx;
		"></video>
			</view>

			<view class="menu">
				<view class="menu-item">
					<image class="menu-icon" src="/static/image/icon/pai.png" mode="scaleToFill" />
					<text class="menu-label">拍照</text>
				</view>
				<view class="menu-item">
					<image class="menu-icon" src="/static/image/icon/lu.png" mode="scaleToFill" />
					<text class="menu-label">录像</text>
				</view>
				<view class="menu-item">
					<image class="menu-icon" src="/static/image/icon/yu.png" mode="scaleToFill" />
					<text class="menu-label">语音</text>
				</view>
				<view class="menu-item" @click="goSetting">
					<image class="menu-icon" src="/static/image/icon/moshi.png" mode="scaleToFill" />
					<text class="menu-label">模式</text>
				</view>
			</view>
			<view class="tu">
				<view class="tu-header" @click="goPhoto">
					<view class="tu-title">图库</view>
					<view class="tu-more">更多<text class="tn-iconfont tn-icon-right"></text></view>
				</view>
				<view class="tu-list" @click="goPhoto">
					<image class="tu-img" src="/static/image/mao.png" mode="aspectFill" />
					<image class="tu-img" src="/static/image/cat2.jpg" mode="aspectFill" />
					<image class="tu-img" src="/static/image/cat3.jpg" mode="aspectFill" />
				</view>
			</view>
		</view>

		<tn-popup v-model="show" mode="bottom" borderRadius="50" closeBtn>
			<view class="pop-modal">
				<view class="pop-title">智能拍摄模式说明</view>
				<view class="pop-desc">自动检测猫咪靠近时启动拍摄。为减少夜间干扰，当环境光线不足且未开启补光灯时，该功能将自动暂停。</view>

			</view>
		</tn-popup>
		<tn-tabbar v-model="currentIndex" @change="changeTabbar" height="120" bgColor="#000" inactiveColor="#fff"
			activeColor="#fff" :list="tabbarList"></tn-tabbar>

	</view>
</template>
<script>
export default {
	data() {
		return {
			show: false,
			tabbarList: [{
				title: '首页',
				activeIcon: '/static/image/tabbar/homea.png',
				inactiveIcon: '/static/image/tabbar/home.png'
			},
			{
				title: '数据',
				activeIcon: '/static/image/tabbar/dataa.png',
				inactiveIcon: '/static/image/tabbar/data.png'
			},

			{
				title: '摄影',
				activeIcon: '/static/image/tabbar/shexianga.png',
				inactiveIcon: '/static/image/tabbar/shexiang.png'
			},
			{
				title: '我的',
				activeIcon: '/static/image/tabbar/mya.png',
				inactiveIcon: '/static/image/tabbar/my.png'
			}
			],
			currentIndex: 2,
		}
	},
	methods: {
		goPhoto() {
			uni.navigateTo({
				url: '/pages/video/images'
			})
		},
		goSetting() {
			uni.navigateTo({
				url: '/pages/video/setting/model'
			})
		},
		changeTabbar(index) {
			if (index == 0) {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			} else if (index == 1) {
				uni.redirectTo({
					url: '/pages/data/index'
				})
			} else if (index == 2) {
				uni.redirectTo({
					url: '/pages/video/index'
				})
			}
			else if (index == 3) {
				uni.redirectTo({
					url: '/pages/user/index'
				})
			}
		},
	}
}
</script>
<style scoped>
.pop-modal {
	background: #fff;
	border-radius: 20rpx;
	padding: 48rpx 36rpx 40rpx 36rpx;
	box-sizing: border-box;
	width: 100vw;
	height: 200px;
	max-width: 700rpx;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pop-title {
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 32rpx;
	color: #111;
	align-self: flex-start;
}

.pop-desc {
	font-size: 26rpx;
	color: #888;
	margin-bottom: 70rpx;
	align-self: flex-start;
	line-height: 1.7;
}

.pop-btn {
	width: 100%;
	height: 88rpx;
	background: #000;
	color: #fff;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: bold;
	border: none;
	margin-top: 20rpx;
}

.menu-icon {
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 30rpx;
}

.title {

	font-size: 46rpx;
	font-weight: bold;
	margin-bottom: 0rpx;
	color: #111;
	margin-top: 60px;
}

.menu {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 32rpx;
	margin: 38rpx 0 32rpx 0;
}

.menu-item {
	width: 210rpx;
	height: 220rpx;
	background: #fafafa;
	border: 1rpx solid #e5e5e5;
	border-radius: 56rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.menu-item .iconfont {
	font-size: 56rpx;
	color: #111;
	margin-bottom: 24rpx;
}

.menu-label {
	font-size: 32rpx;
	color: #666;
	font-weight: 500;
}

.tu {
	margin: 0 0 0 0;
}

.tu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 8rpx 24rpx 8rpx;
}

.tu-title {
	font-size: 44rpx;
	font-weight: bold;
	color: #111;
}

.tu-more {
	font-size: 28rpx;
	color: #999;
	display: flex;
	align-items: center;
}

.tu-arrow {
	font-size: 32rpx;
	margin-left: 8rpx;
}

.tu-list {
	display: flex;
	gap: 32rpx;
}

.tu-img {
	width: 210rpx;
	height: 140rpx;
	border-radius: 32rpx;
	object-fit: cover;
	background: #eee;
}
</style>
